import React, { Component } from 'react'
import moment from 'moment'
import Empty from './../common/Empty'
import Page from './../common/Page'
import styles from './Activity.module.scss'
import { withRouter } from 'react-router-dom'

class Activity extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
    }
    this.onItem = this.onItem.bind(this)
    this.getCurrentPage = this.getCurrentPage.bind(this)
  }
  

  getCurrentPage(currentPage) {
    this.props.onPage(currentPage)
  }

  onItem(item) {
    this.props.history.push(`/mainPage/commonDetail/focusNews/${item.id}`)
  }

  render() {
    const { datas, pageTotal, currentPage } = this.props
    if (datas.length === 0) {
      return (
        <Empty title={'暂无数据'} />
      )
    }

    return (
      <div className={styles.activity_container}>
        {datas.map((item, index) => {
          return (
            <div key={index} className={styles.activity_item}>
              <img src={item.img_url || ''} alt=""/>
              <div className={styles.item_content}>
                <h1 onClick={() => this.onItem(item)}>{item.title || ''}</h1>
                <span>{moment(item.public_at).format('YYYY-MM-DD') || ''}</span>
                <p>{item.description || ''}</p>
              </div>
            </div>
          );
        })}
        {datas.length > 0 && <Page
          pageConfig={{totalPage: pageTotal, pageSize: 5, currentPage }}
          pageCallbackFn={currentPage =>  this.getCurrentPage(currentPage)}
        />}
      </div>
    )
  }
}

export default withRouter(Activity)